<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="../assets/img/index/logo.png" alt="">
          <span>|</span>
          <p>锐智CloudSync</p>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu :default-active="activeIndex" style="width: 100%;">
            <el-menu-item disabled style="height: 40px; cursor: default;"></el-menu-item>
            <el-menu-item index="/account" :class="{ 'is-active': activeIndex === '/account' }"
              @click="toggleMenu('/account')">
              我的账号<div class="blueicon"></div>
            </el-menu-item>
            <el-menu-item index="/phone" :class="{ 'is-active': activeIndex === '/phone' }"
              @click="toggleMenu('/phone')">
              绑定手机<div class="blueicon"></div>
            </el-menu-item>
            <el-menu-item index="/password" :class="{ 'is-active': activeIndex === '/password' }"
              @click="toggleMenu('/password')">
              登录密码<div class="blueicon"></div>
            </el-menu-item>
            <el-menu-item index="/email" :class="{ 'is-active': activeIndex === '/email' }"
              @click="toggleMenu('/email')">
              绑定邮箱<div class="blueicon"></div>
            </el-menu-item>
            <!-- <el-menu-item index="/devices" :class="{ 'is-active': activeIndex === '/devices' }"
              @click="toggleMenu('/devices')">
              登录设备<div class="blueicon"></div>
            </el-menu-item> -->
            <el-menu-item index="/records" :class="{ 'is-active': activeIndex === '/records' }"
              @click="toggleMenu('/records')">
              登录记录<div class="blueicon"></div>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color: #f2f4fa;">
          <component :is="components[activeIndex]" @changePage="handleChildEvent" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import account from '../components/account.vue'
import email from '../components/email.vue'
import devices from '../components/devices.vue'
import password from '../components/password.vue'
import phone from '../components/phone.vue'
import records from '../components/records.vue'

const router = useRouter()
const activeIndex = ref('/account')
const components = {
  '/account': account,
  '/phone': phone,
  '/password': password,
  '/email': email,
  '/devices': devices,
  '/records': records
}

const toggleMenu = (index) => {
  activeIndex.value = index === activeIndex.value ? '' : index;
  if (index) {
    router.push(`/ucenter${index}`); // 路由跳转
  }
}

const handleChildEvent = (index) => {
  toggleMenu(index);
}
</script>

<style scoped>
@import "../assets/css/ucenter.css";
</style>
